<template>
    <section class="content">
        <section class="logo">
            <img src="~path_img/logo.png" alt="">
        </section>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="form_data.phone"
                    name="手机号"
                    label="手机号"
                    type="tel"
                    placeholder="请输入手机号"
                    :rules="[{ required: true , message: '请输入手机号'}]"
            />
            <van-field
                    v-model="form_data.code"
                    center
                    clearable
                    label="验证码"
                    placeholder="请输入验证码"
                    :rules="[{ required: true , message: '请输入验证码'}]"
            >
                <template #button>
                    <van-button size="small" type="info" color="#f5bb19" @click="fun_code()" style="width: 80px;" :disabled="disabled_btn" native-type="button">{{code_text}}</van-button>
                </template>
            </van-field>
            <van-field
                    v-model="xuexiao_value"
                    center
                    clearable
                    readonly
                    label="学 校"
                    @click="xuexiao_show = true"
                    placeholder="请选择学校"
                    :rules="[{ required: true , message: '请选择学校'}]"
            />
            <van-field
                    v-model="nianji_value"
                    center
                    clearable
                    readonly
                    label="年 级"
                    @click="nianji_show = true"
                    placeholder="请选择年级"
                    :rules="[{ required: true , message: '请选择年级'}]"
            />
            <van-field
                    @click="banji_show = true"
                    v-model="banji_value"
                    center
                    clearable
                    readonly
                    label="班 级"
                    placeholder="请选择班级"
                    :rules="[{ required: true , message: '请选择班级'}]"
            />
            <van-field
                    v-model="form_data.xuehao"
                    center
                    clearable
                    label="学 号"
                    placeholder="请输入学号"
                    :rules="[{ required: true , message: '请输入学号'}]"
            />
            <van-field
                    v-model="form_data.xingming"
                    center
                    clearable
                    label="姓 名"
                    placeholder="请输入学生姓名"
                    :rules="[{ required: true , message: '请输入学生姓名'}]"
            />
            <van-field
                    type="password"
                    v-model="form_data.mima"
                    center
                    clearable
                    label="密 码"
                    placeholder="请输入密码"
                    :rules="mima"
            />

            <van-field
                    type="text"
                    v-model="xingbie_value"
                    @click="xingbie_show = true"
                    readonly
                    center
                    clearable
                    label="性 别"
                    placeholder="请选择性别"
                    :rules="[{ required: true , message: '请选择性别'}]"
            />

            <!--选择学校-->
            <van-popup v-model="xuexiao_show" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="xuexiao_list"
                        @confirm="xuexiao_onConfirm"
                        @cancel="xuexiao_show = false"
                />
            </van-popup>
            <!--选择学校-->
            <!--选择年级-->
            <van-popup v-model="nianji_show" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="nianji_list"
                        @confirm="nianji_onConfirm"
                        @cancel="nianji_show = false"
                />
            </van-popup>
            <!--选择年级-->
            <!--选择班经-->
            <van-popup v-model="banji_show" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="banji_list"
                        @confirm="banji_onConfirm"
                        @cancel="banji_show = false"
                />
            </van-popup>
            <!--选择班经-->
            <!--选择性别-->
            <van-popup v-model="xingbie_show" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="xingbie_list"
                        @confirm="xingbie_onConfirm"
                        @cancel="xingbie_show = false"
                />
            </van-popup>
            <!--选择性别-->
            <div style="margin: 16px;">
                <van-button round block type="info" color="#f5bb19" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </section>
</template>

<script>
    export default {
        name: "bangdin1",
        data(){
            return{
                xingbie_show: false,
                xingbie_list:[{"text":"男","id":1},{"text":"女","id":2}],
                xuexiao_list: [],
                xuexiao_value: '',
                xuexiao_show: false,
                nianji_list: [],
                nianji_value: '',
                nianji_show: false,
                banji_list: [],
                banji_value: '',
                banji_show: false,
                form_data: {
                    phone: '',
                    code: '',
                    xuexiao: '',
                    nianji: '',
                    banji:'',
                    xuehao: '',
                    xingming: '',
                    mima:'',
                    xingbie: 1,
                    token: this.$store.state.token
                },
                xingbie_value: '',
                miaoshu: 60,
                disabled_btn:false,
                code_text: '发送验证码',
                mima: [
                    {
                        required: true,
                        message: '请输入确认密码'
                    }
                    // ,{
                    //     validator: value => {
                    //         let res = /^[\S]{6,20}$/
                    //       if (!res.test(value)) return false;
                    //     },
                    //     message: '密码必须6到20位，且不能出现空格'
                    // }

                ]
            }
        },
        mounted() {
            window.dingshu = null;
            this.get_xuexiao()
        },
        methods: {
            password_len(val){
                var len = val.length;
                if( len > 0 && len <= 6) {
                    return true
                }else {
                    return false
                }
            },
            xingbie_onConfirm(item){
                if(item != null) {
                    this.xingbie_value = item.text
                    this.form_data.xingbie = item.id
                    this.xingbie_show = false
                }
            },
            get_xuexiao(){
                this.$https.fetchGet('/common/get_xuexiao').then( res=> {
                    this.xuexiao_list = res.data.map((item) => {
                        return {
                            id: item.id,
                            text: item.name
                        }
                    })
                })
            },
            get_nianji(){
                this.$https.fetchGet('/common/get_nianji',{xuexiao_id: this.form_data.xuexiao}).then( res=> {
                    this.nianji_list = res.data.map((item) => {
                        return {
                            id: item.id,
                            text: item.name
                        }
                    })
                })
            },
            get_banji(){
                this.$https.fetchGet('/common/get_banji',{nianji_id: this.form_data.nianji}).then( res=> {
                    this.banji_list = res.data.map((item) => {
                        return {
                            id: item.id,
                            text: item.name
                        }
                    })
                })
            },
            xuexiao_onConfirm(item){
                if(item != null){
                    this.xuexiao_value = item.text
                    this.form_data.xuexiao = item.id
                    this.get_nianji()
                }
                this.xuexiao_show = false

            },
            nianji_onConfirm(item){
                if(item != null){
                    this.nianji_value = item.text
                    this.form_data.nianji = item.id
                    this.get_banji()
                }
                this.nianji_show = false
            },
            banji_onConfirm(item){
                if(item != null) {
                    this.banji_value = item.text
                    this.form_data.banji = item.id
                }
                this.banji_show = false
            },
            onSubmit(){
                let _this = this
                this.$https.fetchPost('/xuehao_bangding',this.form_data).then( res => {
                    if(res.code == 0){
                        this.$toast('绑定成功');
                        this.$store.commit('login_token','')
                        this.$store.commit('token',res.data)
                        setTimeout((res) => {
                            _this.$router.push('/index')
                        },1000)
                    }
                    else{
                        this.$toast(res.msg);
                    }
                })
            },
            fun_code(){
                let reg = /^1\d{10}$/,_this = this;
                if(!reg.test(this.form_data.phone)){
                    this.$toast('请输入正确的手机号');
                }
                else{
                    _this.disabled_btn = true;
                    this.$https.fetchGet('/mes',{'phone': this.form_data.phone}).then(res => {
                        if(res.code == 0){
                            window.dingshi = setInterval(()=> {
                                if(_this.miaoshu > 0){
                                    _this.miaoshu = _this.miaoshu - 1 ;
                                    _this.code_text = _this.miaoshu;
                                }
                                else{
                                    clearInterval(window.dingshi);
                                    _this.miaoshu = 60;
                                    _this.disabled_btn = false;
                                    _this.code_text = '获取验证码';
                                }

                            },1000)
                        }
                        else{
                            this.$toast(res.msg)
                            _this.disabled_btn = false
                        }

                    })

                }
            }
        }
    }
</script>

<style scoped lang="less">
.logo{
     padding: 1rem 0 1.5rem;
    img{
        width: 2.5rem;
    }
}
</style>
